<template>
    <div>
        <div style="width:100%;margin-left:0px">
            <div :id="chartId" :style="{ height: chartHeight + 'px' }" />
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            titleText: { required: true, type: String },
            chartId: { required: true, type: String },
            chartHeight: { required: true, type: Number },
            chartData: { required: false, type: Array, default: () => [] },
            chartBgColor: { required: false, type: String, default: "transparent" },
            chartXData: {
                required: false,
                type: Array,
                default: () => [],
            },
            xaxisData: {
                required: false,
                type: Array,
                default: () => [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月",
                ],
            },
            yaxisName: { required: false, type: String, default: "个" },
            yaxisData1: {
                required: false,
                type: Array,
                default: () => [20, 50, 44, 30, 14, 88, 44, 50, 40, 50, 40],
            },
            yaxisData2: {
                required: false,
                type: Array,
                default: () => [65, 30, 44, 50, 65, 19, 50, 60, 15, 70, 55],
            },
            yaxisData3: {
                required: false,
                type: Array,
                default: () => [70, 60, 78, 40, 25, 49, 40, 15, 50, 70, 25],
            },
            yaxisData4: {
                required: false,
                type: Array,
                default: () => [20, 30, 18, 70, 25, 59, 40, 65, 50, 70, 25],
            },
            chartColor: {
                required: false,
                type: Array,
                default: () => ["#5470c6", "#91cc75", "#fac858", "#ee6666"],
            },
            txtColor:{
            required: false,
                type: Array,
                default: () => ["#000000"],
                },
            },
        data() {
            return {
                myChart: null,
            };
        },
        mounted() { },
        methods: {
            initChart() {
                var month = [
                    "1",
                    "2",
                    "3",
                    "4",
                    "5",
                    "6",
                    "7",
                    "8",
                    "9",
                    "10",
                    "11",
                    "12",
                ];
                var jdData = [
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                    ['一室', '二室', '三室', '四室', '五室', '六室', '七室', '八室', '九室', '十室', '十一室', '十二室', '十三室', '十四室', '十五室', '十六室', '十七室', '十八室', '十九室', '二十室', '二十一室', '二十二室', '二十三室', '二十四室', '二十五室'],
                ]
                var data = [
                    [13, 1, 13, 42, 24, 22, 47, 16, 23, 13, 12, 17, 37, 11, 7, 15, 11, 16, 2, 14, 7, 5, 1, 3, 11,],
                    [14, 6, 20, 32, 14, 12, 14, 14, 33, 6, 11, 4, 37, 15, 17, 5, 6, 10, 1, 10, 3, 2, 0, 12, 12,],
                    [10, 3, 6, 16, 20, 14, 20, 15, 13, 3, 32, 2, 27, 5, 11, 25, 3, 6, 0, 4, 3, 2, 2, 16, 11,],
                    [3, 10, 3, 12, 14, 16, 30, 14, 3, 2, 10, 14, 17, 5, 4, 15, 3, 6, 4, 11, 3, 5, 1, 26, 10,],
                    [5, 16, 2, 22, 24, 14, 22, 15, 2, 5, 42, 14, 37, 5, 17, 5, 5, 20, 3, 10, 13, 15, 0, 16, 6,],
                    [11, 13, 16, 18, 24, 11, 17, 22, 5, 4, 10, 11, 27, 1, 18, 25, 3, 11, 10, 10, 17, 6, 1, 6, 19,],
                    [15, 7, 13, 9, 14, 9, 27, 8, 5, 9, 12, 15, 17, 5, 11, 6, 2, 6, 2, 8, 7, 3, 0, 15, 12,],
                    [17, 21, 10, 12, 9, 17, 17, 18, 4, 16, 22, 10, 17, 11, 7, 15, 3, 11, 1, 2, 2, 5, 3, 26, 11,],
                    [10, 22, 16, 36, 18, 9, 18, 11, 2, 21, 72, 10, 17, 4, 8, 5, 3, 26, 3, 11, 3, 15, 5, 12, 10,],
                    [23, 15, 23, 23, 30, 20, 11, 2, 12, 36, 32, 15, 17, 2, 9, 15, 2, 20, 5, 14, 3, 6, 1, 26, 16,],
                    [8, 6, 22, 18, 8, 15, 12, 12, 18, 32, 10, 14, 17, 1, 5, 11, 4, 15, 1, 11, 7, 0, 7, 15, 8,],
                    [12, 13, 12, 6, 19, 17, 11, 8, 22, 32, 13, 24, 17, 5, 7, 15, 2, 6, 2, 9, 3, 1, 1, 10, 8,],
                ];
                var _this = this;
                if (this.myChart) {
                    document
                        .getElementById(this.chartId)
                        .removeAttribute("_echarts_instance_");
                };
                const option = {
                    baseOption: {
                        backgroundColor: 'transparent', //背景颜色
                        timeline: {
                            data: month,
                            axisType: 'category',
                            autoPlay: true,
                            playInterval: 5000, //播放速度

                            left: '10%',
                            right: '5%',
                            bottom: '0%',
                            width: '90%',
                            //  height: null,
                            label: {
                                normal: {
                                    textStyle: {

                                        color: '#fff',
                                    }
                                },
                                emphasis: {
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            symbolSize: 10,
                            lineStyle: {
                                color: '#fff'
                            },
                            checkpointStyle: {
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            controlStyle: {
                                showNextBtn: true,
                                showPrevBtn: true,
                                normal: {
                                    color: '#ff8800',
                                    borderColor: '#ff8800'
                                },
                                emphasis: {
                                    color: '#fff',
                                    borderColor: '#fff'
                                }
                            },

                        },
                        title: {
                            text: '',
                            right: '2%',
                            bottom: '8%',
                            textStyle: {
                                fontSize: 25,
                                color: '#fff' //标题字体颜色
                            }
                        },
                        tooltip: {
                            'trigger': 'axis'
                        },
                        calculable: true,
                        grid: {
                            left: '18%',
                            right: '2%',
                            bottom: '6%',
                            top: '0%',
                            containLabel: true
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        yAxis: [{

                            nameGap: 50,
                            offset: '37',
                            'type': 'category',
                            interval: 50,
                            //inverse: ture,//图表倒叙或者正序排版
                            data: '',
                            nameTextStyle: {
                                color: '#fff'
                            },


                            axisLabel: {
                                //rotate:45,
                                show: false,
                                textStyle: {
                                    fontSize: 32,

                                    color: function (params, Index) { // 标签国家字体颜色

                                        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色

                                        var colorarrays = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
                                            '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
                                            '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622',
                                            '#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83'
                                        ];

                                        //console.log("111", Index, colorarrays[Index],params); //打印序列

                                        return colorarrays[jdData[0].indexOf(params)];
                                    },


                                }, //rotate:45,
                                interval: 50
                            },
                            axisLine: {

                                lineStyle: {
                                    color: '#fff' //Y轴颜色
                                },
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#fff'
                                }
                            },

                        }],
                        xAxis: [{
                            'type': 'value',
                            'name': '',

                            splitNumber: 1, //轴线个数
                            nameTextStyle: {
                                color: '#fff'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#ffa597' //X轴颜色
                                }
                            },
                            axisLabel: {
                                formatter: '{value} '
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#fedd8b'
                                }
                            },
                        }],
                        series: [{
                            'name': '',
                            'type': 'bar',
                            markLine: {
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#fff',
                                        width: 3
                                    }
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right', //数值显示在右侧
                                    formatter: '{c}'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        // build a color map as your need.
                                        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
                                        var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
                                            '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
                                            '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622',
                                            '#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83'
                                        ];
                                        // return colorList[params.dataIndex]

                                        console.log("111", params.name); //打印序列
                                        return colorList[jdData[0].indexOf(params.name)];
                                    },

                                }
                            },
                        },

                        {
                            'name': '',
                            'type': 'bar',
                            markLine: {


                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                lineStyle: {

                                    normal: {
                                        color: '#fff',
                                        width: 3
                                    }
                                },
                            },
                            barWidth: '50%',
                            barGap: '-100%',
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: 16,  //标签国家字体大小
                                    position: 'left', //数值显示在右侧
                                    formatter: function (p) {
                                        return p.name;
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {


                                    color: function (params) {
                                        // build a color map as your need.
                                        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
                                        var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
                                            '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
                                            '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622',
                                            '#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83'
                                        ];
                                        // return colorList[params.dataIndex]

                                        // console.log("111", params.name); //打印序列
                                        return colorList[jdData[0].indexOf(params.name)];
                                    },

                                }
                            },
                        }
                        ],

                        animationEasingUpdate: 'quinticInOut',
                        animationDurationUpdate: 2500, //动画效果
                    },

                    options: []
                };
                for (var n = 0; n < month.length; n++) {

                    var res = [];
                    //alert(jdData.length);
                    for (let j = 0; j < data[n].length; j++) {
                        res.push({
                            name: jdData[n][j],
                            value: data[n][j]
                        });

                    }

                    res.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 6);

                    res.sort(function (a, b) {
                        return a.value - b.value;
                    });


                    var res1 = [];
                    var res2 = [];
                    //console.log(res);
                    for (let t = 0; t < res.length; t++) {
                        res1[t] = res[t].name;
                        res2[t] = res[t].value;
                    };
                    
                    option.options.push({
                        title: {
                            text: month[n] + '月'
                        },
                        yAxis: {
                            data: res1,
                        },
                        series: [{
                            data: res2
                        }, {
                            data: res2
                        }]
                    });
                };
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.getElementById(this.chartId));
                
                // 绘制图表
                this.myChart.setOption(
                    option
                );
            },
           
        },
        template: "#template"
    };
</script>
<style scoped>
    .view_chart {
        width: 100%;
        padding: 20px 10px 0;
    }
</style>
